<template>
  <ActionPanel>
    <el-form :model="data" label-width="auto">
      <el-form-item label="名称">
        <el-input v-model="name" />
      </el-form-item>
      <el-form-item label="类型">
        <ElSelect v-model="data.type">
          <ElOption v-for="(value, key) in statTypeOptions" :label="value" :value="key" :key="key" />
        </ElSelect>
      </el-form-item>
      <el-form-item label="标签">
        <el-input v-model="data.label" />
      </el-form-item>
      <el-form-item label="注释">
        <el-input type="textarea" v-model="data.comment" />
      </el-form-item>
      <el-form-item v-if="seedName" label="申明">
        <DeclareEditor :seed-name="seedName" v-model="data.declare" />
      </el-form-item>
      <el-form-item v-if="seedName" label="条件">
        <SearchesEditor v-model="data.searches" :seed-name="seedName" :key="seedName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <ElButton type="primary" @click="doSave">保存</ElButton>
      <ElButton @click="close">关闭</ElButton>
    </template>
  </ActionPanel>
</template>
<script lang="ts" setup>
  import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton } from 'element-plus'
  import { getAction, getSeed } from '@/views/seed-dev'
  import { computed, inject, ref } from 'vue';
  import feedback from '@/utils/feedback';
  import { ActionPanel } from '@/components/ActionPanel';
  import { closePopupKey } from '@/components/Popup';
  import { StatConfiguration } from '@/views/dev-types';
  import { statTypeOptions } from '..';
  import { DeclareEditor } from '../../DeclarsEditor';
  import { SearchesEditor } from '../../SearchesEditor';

  const props = defineProps<{seedName?: string, actionName?: string}>()
  const seedName = computed(() => props.seedName || getAction(props.actionName).seedName)
  const name = ref<string>()
  const data = ref<StatConfiguration>({})

  const close = inject<() => void>(closePopupKey, void 0)
  function validate() {
    if (!name.value) {
      feedback.alertError('名称不能为空')
      return false
    }

    let stats
    if(props.seedName) {
      const seed = getSeed(props.seedName)
      if(props.actionName) {
        const action = seed.actions?.[props.actionName]
        if(!action) return true

        stats = action.stats
      } else {
        stats = seed.stats
      }
    } else {
      const action = getAction(props.actionName)
      stats = action.stats
    }

    if(!stats) return true

    if(Object.keys(stats).includes(name.value)) {
      feedback.alertError(`统计【${name.value}】已存在`)
      return false
    }

    return true
  }

  function doSave() {
    if(validate()) {
      if(props.seedName) {
        const seed = getSeed(props.seedName)
        if(props.actionName) {
          const action = seed.actions?.[props.actionName]
          action.stats = action.stats || {}
          action.stats[name.value] = data.value
        } else {
          seed.stats = seed.stats || {}
          seed.stats[name.value] = data.value
        }
      } else {
        const action = getAction(props.actionName)
        action.stats = action.stats || {}
        action.stats[name.value] = data.value
      }
      
      close?.()
    }
  }
</script>